<template>
<div class="box">
  <div class="font-600">
    課程/產品資料報表
  </div>
  <div style="min-width: 1200px;" v-cloak class="mt-[30px]">
    <el-form ref="ruleFormRef" label-width="80px" :model="fromData">
      <el-form-item label="類型" prop="type">
        <el-select v-model="fromData.type" placeholder="請選擇" >
          <el-option label="產品" value="1"></el-option>
          <el-option label="產品組合" value="2"></el-option>
          <el-option label="課程" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="狀態" prop="status">
        <el-select v-model="fromData.status" placeholder="請選擇" >
          <el-option label="發售中" value="1"></el-option>
          <el-option label="停售" value="-1"></el-option>
        </el-select>
      </el-form-item>
        <ExcelFooter @rebuild="rebuild" @showPage="showPage" />
    </el-form>
    <!-- <a v-show="false" ref="exportExcel" href=""></a> -->
  </div>
 </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import { useRouter} from "vue-router";

const ruleFormRef = ref('')
const fromData = reactive({
        type:'',
        status: '',
      })
const router = useRouter()
const showPage = ()=>{
          let {href} = router.resolve({
          path: '/customer_report_print',
          query: {
           index:'productReport',
           url:'product/derive',
           data:JSON.stringify(fromData),
          }
        })
    window.open(href,'_blank')
}

      const rebuild = ()=>{
  ruleFormRef.value.resetFields()
}
</script>

<style scoped lang='less'>
.box {
  padding: 16px 33px;
}
</style>